JavaScript MVC
MVC är en utvecklings-modell där man delar upp:
- Vy: Det man ser (HTML)
- Modell: Hur det fungerar (JavaScript)
- Kontroller: Bestämmer vilken modell/vy som ska visas (HTTP Server)
Om du har utvecklat en hemsida förut har du troligtvis redan använt denna modell.
Exempel vy i HTML:
<!DOCTYPE html> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="todo.css"> <script type="text/javascript" src="todo.js"></script> <div class="todo> <h1>Todo-list MVC in vanilla JavaScript</h1> <ul id="todoList" ></ul> <form id="todoForm" class="todo"> <label for="todoInputText">Add item:</label> <input type="text" id="todoInputText" /> <button id="todoInputButton">Add #<span id="todoItemCount">1</span></button> </form> </div>
I vyn används "semantiska" element, som varken innehåller data eller styling. Med "semantiska" element menas att namn används för att beskriva elementens innebörd. <ul> talar om att det är en osorterad lista, <form> att det är ett formulär och <button> för knapp etc. Dessa element ingår i HTML-standarden. Man skulle kunna använda <div>:ar till allt, men då skulle semantiken gå förlorad.
För styling används CSS.
Denna vy har ett eget stylesheet (todo.css). Men man kan lika gärna lägga modellens CSS i ett style-element.
Exempel modell i JavaScript
var todoForm = document.getElementById("todoForm"); // reference form todoForm.onsubmit = function todoAdd(event) { // Add event handler for "submit" form var todoInputText = document.getElementById("todoInputText"); // reference text-input var listItem = document.createElement("li"); // create new list item listItem.appendChild(document.createTextNode(todoInputText.value)); // Append text from text-input into list element var todoList = document.getElementById("todoList"); // reference todo-list todoList.appendChild(listItem); // Append list item to list var todoItemCount = document.getElementById("todoItemCount"); // reference item count (inside Add button) todoItemCount.removeChild(todoItemCount.firstChild); // Remove old nr todoItemCount.appendChild(document.createTextNode(todoList.childNodes.length + 1)); // Append new nr as text todoInputText.value = ""; // Empty text-input return false; // Prevent default browser action (http get form action) }
I modellen används vanlig JavaScript. Det kan vara frestande att använda innerHTML eftersom det går snabbare att koda HTML än att bygga upp HTML-elementen med JavaScript.
Att använda JavaScript har dock många fördelar, till exempel omslutningar / closure's som gör det enkelt att hantera "async" händelse-baserad funktionalitet.
Att använda document.createTextNode i stället för innerHTML förhindrar även att skadlig kod injekteras.
Man kan även lägga modellen i ett script-element, så att både vy och modell ligger i samma fil, vilket gör att sidan laddas aningen snabbare.
Kontroller
Fördelen med en statisk webbaserad klient är att appen enkelt går att spara på en web-server, och går att komma åt via en URL (web adress).
Det finns många alternativ på CDN (Content delivery network), webb-hotell och webb-servrar. Min favorit-server är Nginx, men det går lika bra med Apache eller Lighttpd, ja det går till och med att hosta appen i Windows med IIS
Databas
Om datan endast behöver sparas på klienten kan man använda webbläsarens inbyggda funktioner localStorage eller openDatabase
För att skicka data till en server kan man använda Websocket eller XMLHttpRequest.
Written by Johan Zetterberg Oktober 14, 2016.